<template>
  <div>
      <el-container>
          <!--顶部-->
          <el-header>              
              <div  class="header">
                  <el-row>
                      <el-col :span=4 class="headerCol">
                          <el-image :src="require('../../../img/littleIcon/doctorLogo.png')"></el-image>
                      </el-col>
                      <el-col :span=12 class="headerSex">
                        <el-steps :active="2" finish-status="success" simple='true'>
                            <el-step title="选择套餐" icon="el-icon-edit"></el-step>
                            <el-step title="查看套餐" icon="el-icon-edit"></el-step>
                            <el-step title="体检预约" icon="el-icon-edit"></el-step>
                        </el-steps>
                      </el-col>
                  </el-row>
              </div>
          </el-header>
        <el-divider></el-divider>
          <!-- <el-image class="el-image" :src="require('../../../junM/img/loginbackground.jpeg')"></el-image> -->

          <el-main>
              <el-row class="text-row">
                  <el-col :span='24'>
                    <h3>{{this.$store.state.setmealItem.name}}</h3>
                    <el-tag type="danger" effect="plain" hit='true' size="mini">{{this.$store.state.setmealItem.sex}}</el-tag>&nbsp;&nbsp;
                    <el-tag type="danger" effect="plain" hit='true' size="mini">{{this.$store.state.setmealItem.minage}}-{{this.$store.state.setmealItem.maxage}}</el-tag><br><br>
                    <label style="font-size:16px"><label style="color:red;">注意：</label>{{this.$store.state.setmealItem.remark}}</label>
                    <!-- <el-button type="primary" icon="el-icon-edit" class="btnOrder" @click="btnOrder">立即预约</el-button> -->
                  </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row class="text-row">
                  <el-col :span='24'>
                      <label class="l">|</label><h3>体检人信息</h3>
                  </el-col>
              </el-row>
              <el-row class="text-row">
                  <el-col :span="6">
                    <el-form :label-position="right" label-width="120px" ref="userList" :model="userList" :rules="rules">
                        <el-form-item label="体检人：" prop="name">
                            <el-input v-model="userList.name" placeholder="体检人" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="性别：">
                            <el-radio v-model="userList.sex" label="1">男</el-radio>
                            <el-radio v-model="userList.sex" label="2">女</el-radio>
                        </el-form-item>
                        <el-form-item label="手机号：" prop="phonenumber">
                            <el-input v-model="userList.phonenumber" placeholder="手机号" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号：" prop="idcard">
                            <el-input v-model="userList.idcard" placeholder="身份证号"></el-input>
                        </el-form-item>
                        <el-form-item label="年龄：" prop="age">
                            <el-input v-model="userList.age" placeholder="输入年龄"></el-input>
                        </el-form-item>
                        <el-form-item label="婚否：">
                            <el-radio v-model="userList.tMemberInfo.maritalStatus" label="0">未婚</el-radio>
                            <el-radio v-model="userList.tMemberInfo.maritalStatus" label="1">已婚</el-radio>
                        </el-form-item>
                        <el-form-item label="体检日期选择：" prop="orderdate">
                            <!-- <el-input type="datetime"  v-model="userList.tOrder.orderdate"></el-input> -->
                            <el-date-picker
                            v-model="userList.tOrder.orderdate"
                            type="datetime"
                            placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-input type="hidden"  v-model="userList.setmealId"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="orderSubmit">确认预约</el-button>
                        </el-form-item>
                    </el-form>
                  </el-col>
              </el-row>
          </el-main>
          <el-footer></el-footer>
      </el-container>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        var checkOrderDate=(rule,value,callback)=>{
            value = this.userList.tOrder.orderdate
            var date = new Date();
            if(!value){
                callback(new Error('请选择日期'))
            }else if(value<=date){
                callback(new Error('预约时间必须>=当前时间'))
            }else{
                callback()
            }
        }
        // var checkIdcard=(rule,value,callback)=>{
        //     axios.get("/member/queryByIdCard?idCard="+value)
        //     .then(res => {
        //         if(res.data){
        //             callback(new Error(('身份证已经存在'+value+'，请检查您输入的身份证是否正确')))
        //         }else{
        //             callback()
        //         }                    
        //     })
        //     .catch(err => {
        //         console.error(err); 
        //     })
        // }
        return{
            userList:{
                name:'',
                phonenumber:'',
                idcard:'',
                age:'',
                sex:'',
                tMemberInfo:{
                    maritalStatus:''
                },
                tOrder:{
                    orderdate:''
                },
                setmealId:this.$store.state.setmealItem.id
            },            
            rules:{
                name:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                phonenumber:[
                    {required: true,message:'请输入体检人或者负责人的手机号码',trigger: 'blur'},
                    {min:11,max:11,message:'手机号码为11位',trigger:'blur'}
                ],
                idcard:[
                    {required: true,message:'请输入体检人的身份证号码',trigger: 'blur'},
                    {min:18,max:18,message:'身份证号码为18位',trigger: 'blur'},
                    // {required: true,validator: checkIdcard,trigger: 'blur'}
                ],  
                orderdate:[
                    // {required: true,message:'请输入预约时间',trigger: 'blur'},
                    {required: true,validator: checkOrderDate,trigger: ['blur', 'change']}
                ],
                age:[
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                ]
            }
        }
    },
    methods:{
        orderSubmit(){
            this.$refs['userList'].validate(valid=>{
                if(valid){
                    axios.post("/member/updateByPrimaryKeySelective",{tMember:this.userList})
                    .then(res => {
                        console.log(res.data)
                        this.$message({
                            message: '预约成功！',
                            type: 'success'
                        });
                        this.$router.push("/")
                    })
                    .catch(err => {
                        console.error(err); 
                        this.$message({
                            message: '预约失败！按F12检查',
                            type: 'error'
                        });
                    })
                }else{
                    this.$message({
                    message: '带*号的，不能为空',
                    type: 'warning'
                    });
                }
            })     
        }
    },
    created(){
        axios.get("/member/queryMemberAlls")
        .then(res => {
            console.log(res.data)
            this.userList.name=res.data.name
            this.userList.phonenumber=res.data.phonenumber
        })
        .catch(err => {
            console.error(err); 
            this.$message({
                message:'出错，请按F12检查',
                Type:'error'
            })
        })
    }
}
</script>

<style scoped>
    /* .header span{
        height: 40px;
    }
    .header{
        background-color: black;
        font-size: 25px;
        color: white;
        margin-top: 3px;
    } */
    .headerSex{
        margin-top:20px;
    }
    .headerCol{
        margin-top: 10px;
        text-align: left;
    }
    /* .el-image{
        width: 1290px;
        margin: 0 auto;
        height: 350px;
    } */
    .text-row{
        text-align: left;
        cursor: pointer;
    }
    .l{
        font-size: 25px;
        font-weight:bold;
        color: darkseagreen;
    }
</style>